<template>
    <!-- html结构 -->
    <div class="person">
        <h1>情况五：监视上述多个数据</h1>
        <h1>姓名：{{person.name}}</h1>
        <h1>年龄：{{person.age}}</h1>
        <h1>汽车：{{person.car.c1}}、{{ person.car.c2 }}</h1>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改汽车1</button>
        <button @click="changeC2">修改汽车2</button>
        <button @click="changeCar">修改汽车对象</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import { reactive, watch } from 'vue';

let person =reactive({
    name:'张三',
    age:18,
    car:{
        c1:"兰博基尼",
        c2:"法拉利"
    }
})
function changeName() {
    person.name += '~';
}
function changeAge() {
    person.age += 1;
}
function changeC1() {
    person.car.c1 = "保时捷1";
}
function changeC2() {
    person.car.c2 = "保时捷2";
}
function changeCar() {
    person.car = {
        c1:"雅迪",
        c2:"艾玛"
    }
}
// 情况五，监视上述多个数据
watch([()=>person.name,()=>person.car.c1,person.car], (oldPerson, newPerson) => {
    console.log('person.car被修改了', oldPerson, newPerson);
},{deep:true})


</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>